<template>
  <div class="bigbox">
    <div class="bodybox">
      <!-- 搜索查询框 -->
      <div class="topbox">
        <div>
          <el-select v-model="value" placeholder="请选择" size="small" clearable @change="getdatalist()">
            <el-option label="编辑中" value="0" class="option"></el-option>
            <el-option label="已发布" value="1" class="option"></el-option>
            <el-option label="已停用" value="2" class="option"></el-option>
          </el-select>
        </div>
        <div><button @click="added">新增</button></div>
      </div>
      <!-- 表盒区域 -->
      <div class="dodybox">
        <div class="table">
       <TableColumn :tableData="tableData" :tableConfig="tableConfig" :issize="'medium'">
        <el-table-column
            prop="itemImage"
              label="图标"
              align="center">
                <template #default="{row}">
                  <img v-show="row.imageBase64" style="width: 60px;
                  height: 60px;" :src="'data:image/png;base64,' + row.imageBase64" alt="">
                </template>
              </el-table-column>
        <el-table-column
        prop="status"
        align="center"
        label="状态"
        width="150">
        <template #default="{row}">
          <span >{{ row.status==0?'编辑中':row.status==1?'已发布':'已停用' }}</span>
        </template>
        </el-table-column>
        <el-table-column
        prop="version"
        label="发布版本"
        width="150">
        <template #default="{row}">
          <span style="color: #1a90fe;cursor: pointer;" @click="banben(row)">{{ row.version }}</span>
        </template>
        </el-table-column>
        <el-table-column
            prop="address"
            label="操作"
            align="center"
            width="150">
            <template #default="{row}">
              <i @click="fabu(row)" class="el-icon-message" style="margin-right: 20px; cursor: pointer;"></i>
              <i @click="modify(row)" class="el-icon-edit" style="color:#1a90fe ;margin-right: 20px; cursor: pointer;"></i>
              <i @click="delet(row)" class="el-icon-delete" style="color: red;cursor: pointer;"></i>
            </template>
        </el-table-column>
      </TableColumn>
    </div>
      </div>
      <!-- 新增dialog弹窗 -->
      <div class="dialog">
        <el-dialog
          :title="isshow?'修改产品定义':'新增业务类型'"
          :visible.sync="dialogVisible"
          width="50%">
          <div >
            <el-form :model="form" :rules="rules" ref="form" label-position="right" label-width="110px">
                <el-form-item label="业务类型编码" size="small" prop="bizCode">
                  <el-input v-model="form.bizCode" :disabled="isshow"></el-input>
                </el-form-item>
              <el-form-item label="业务类型名称" size="small" prop="bizName">
                <el-input v-model="form.bizName"></el-input>
              </el-form-item>
              <el-form-item label="绑定设备模型" size="small">
                <el-select v-model="form.deviceModel"   style="width: 100%;">
                  <el-option v-for="(item,index) in shebeilist" :key="index" :label="item.text" :value="item.value" class="option"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="业务类型描述" prop="bizExplain">
                <el-input type="textarea" v-model="form.bizExplain"></el-input>
              </el-form-item>
              <el-form-item label="产品图标">
                <el-upload
                  class="avatar-uploader"
                  v-model="form.imageBase64"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :show-file-list="false"
                  :http-request="httpRequest">
                  <img v-if="imageUrl" :src="imageUrl" class="avatar" style="margin-top: 10px;">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
              <template>
                <div class="quanxian">
                  <div class="xitong">
                    <div class="juese">系统角色</div>
                      <div class="checkbox">
                        <el-checkbox-group v-model="form.roleIds" @change="handleCheckedCitiesChange">
                            <el-checkbox v-for="(item,index) in checklist" :key="index" :label="item.roleId" :name="item.roleId">
                            {{ item.roleName }}
                            </el-checkbox>
                        </el-checkbox-group>
                      </div>
                  </div>
                  <div class="gongnneg">
                    <el-tabs v-model="activeName" >
                      <!-- 循环第一层系统功能 -->
                      <el-tab-pane v-for="(item,index) in modules" :key="index" :label="item.name" :name="item.id">
                        <!-- 循环第二层功能权限 -->
                        <div v-for="(item,index) in item.packages" :key="index">
                          <div class="taxt">{{ item.name }}</div>
                          <div>
                            <!-- 循环第三层页面/功能 -->
                            <el-checkbox-group v-model="checkedCities">
                              <el-checkbox v-for="(item,index) in item.functions" :label="item.id" :key="index" disabled>
                                {{item.name}}
                              </el-checkbox>
                            </el-checkbox-group>
                          </div>
                        </div>
                      </el-tab-pane>
                    </el-tabs>
                  </div>
                </div>

              </template>
            </el-form>
          </div>
                  <span slot="footer" class="dialogbutton" ref="fixedButtons">
                    <button class="button sure" @click="submit">确 定</button>
                    <button class="button " @click="cancellation">取 消</button>
                  </span>
        </el-dialog>
      </div>
      <!-- 发布业务类型弹窗 -->
      <div class="fabuleix">
        <el-dialog
          title="发布业务类型"
          :visible.sync="dialogVisibles"
          width="30%">
          <div>
            <el-form :model="forms" :rules="ruless" ref="forms" label-position="right" label-width="110px">
              <el-form-item label="发布版本" size="small" prop="deployVersion">
                <el-input v-model="forms.deployVersion"></el-input>
              </el-form-item>
              <el-form-item label="发布说明" prop="deployExplain">
                <el-input type="textarea" v-model="forms.deployExplain"></el-input>
              </el-form-item>
            </el-form>
          </div>
          <span slot="footer" >
            <button class="button sure" type="primary" @click="newfabu">发布</button>
            <button class="button" @click="quxiaofabu">取 消</button>
          </span>
        </el-dialog>
      </div>
      <!-- 产看版本弹窗 -->
      <div class="banben">
        <el-dialog
          title="配电运维基础版已发布版本列表"
          :visible.sync="dialogVisibless"
          width="40%">
          <div>
            <!-- <div style="margin-bottom: 15px;">配电运维基础版已发布版本列表</div> -->
            <div style="height: 200px;">
              <TableColumn :tableData="tableDatas" :tableConfig="tableConfigs">
                <el-table-column
                    prop="address"
                    label="操作"
                    align="center"
                    width="120">
                    <template #default="{row}">
                       <span style="color: #1a90fe;cursor: pointer;"  @click="chankan(row)">查看对应角色</span>
                    </template>
                </el-table-column>
              </TableColumn>
            </div>
          </div>
          <span slot="footer" >
            <button class="button" @click="dialogVisibless = false">关闭</button>
          </span>
        </el-dialog>
      </div>
      <!-- 查看对应角色弹窗 -->
      <div class="duiying">
        <el-dialog
        title="系统角色"
        :visible.sync="dialogVisiblesss"
        width="35%">
        <div>
          <el-checkbox-group v-model="roleIds">
            <el-checkbox v-for="(item,index) in checklist" :key="index" :label="item.roleId" :name="item.roleId" :disabled="true">
              {{ item.roleName }}
            </el-checkbox>
          </el-checkbox-group>
        </div>
        <span slot="footer" >
          <button class="button" @click="dialogVisiblesss = false">取 消</button>
        </span>
      </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import TableColumn from '@/components/Table/index.vue'
import {
  gettablelistapi, getjueseapi, postaddedapi, getxinxiapi, putxinxiapi, getquanxianapi,
  postfabuapi, delleixinapi, getbanbenleixingapi, getleixingxialaapi, getxiangqingqpi
} from '@/api/version'
export default {
  name: 'CallPoliceIndex',
  components: {
    TableColumn
  },
  data () {
    return {
      activeName: '',
      form: { roleIds: [], imageBase64: '' },
      dialogVisible: false,
      value: '',
      tableData: [],
      tableConfig: [
        { label: '业务类型编码', prop: 'code' },
        { label: '业务类型名称', prop: 'name' },
        { label: '业务类型描述', prop: 'explain' }
      ],
      rules: {
        bizCode: [
          { required: true, message: '业务类型编码必选', trigger: 'blur' }
        ],
        bizName: [
          { required: true, message: '业务类型名称必选', trigger: 'blur' }
        ],
        bizExplain: [
          { required: true, message: '业务类型描述必选', trigger: 'blur' }
        ]
      },
      checklist: [],
      isshow: false,
      dialogVisibles: false,
      forms: {},
      ruless: {
        deployVersion: [
          { required: true, message: '发布版本必填', trigger: 'blur' }
        ],
        deployExplain: [
          { required: true, message: '发布说明必填', trigger: 'blur' }
        ]
      },
      row: {},
      dialogVisibless: false,
      tableDatas: [],
      tableConfigs: [
        { label: '发布版本', prop: 'version', width: '100' },
        { label: '版本描述', prop: 'explain' },
        { label: '发布时间', prop: 'deployTime' }
      ],
      dialogVisiblesss: false,
      roleIds: [],
      shebeilist: [],
      imageUrl: '',
      modules: [],
      checkedCities: []
    }
  },

  async mounted () {
    this.getdatalist()
    const res = await getjueseapi()
    this.checklist = res.data.list
    const ress = await getleixingxialaapi()
    this.shebeilist = ress.data.list
    const ceshi = await getxiangqingqpi()
    this.modules = ceshi.data.entity.modules
    this.activeName = this.modules[0].id
  },

  methods: {
    // 文件上传
    httpRequest (data) {
      this.imageUrl = URL.createObjectURL(data.file)
      // 这是限制上传文件类型
      const isPFX =
        data.file.type === 'image/png'
      const isLt2M = data.file.size / 1024 / 1024 < 2
      if (!isPFX) {
        this.$message.error('上传头像图片只能是PNG格式!')
      } else if (!isLt2M) {
        this.$message.error('上传文件大小不能超过 2MB!')
      } else {
        this.getBase64(data.file).then((resBase64) => {
          this.form.imageBase64 = resBase64.split(',')[1] // 直接拿到base64信息
        })
      }
    },
    // 这个file参数 也就是文件信息，你使用 插件 时 你就可以打印出文件信息 看看嘛
    getBase64 (file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader()
        let fileResult = ''
        reader.readAsDataURL(file)
        // 开始转
        reader.onload = function () {
          fileResult = reader.result
        }
        // 转 失败
        reader.onerror = function (error) {
          reject(error)
        }
        // 转 结束  就 resolve 出去
        reader.onloadend = function () {
          resolve(fileResult)
        }
      })
    },
    // 多选框查询对应权限
    async handleCheckedCitiesChange (val) {
      if (val.length) {
        const res = await getquanxianapi({ roleId: val[val.length - 1] })
        this.checkedCities = res.data.list
      } else {
        this.checkedCities = []
      }
    },
    // 获取表格数据
    async getdatalist () {
      const res = await gettablelistapi({ status: this.value })
      this.tableData = res.data.list
    },
    // 新增业务类型
    async added () {
      this.dialogVisible = true
    },
    // 确认新增
    async submit () {
      await this.$refs.form.validate()
      this.isshow
        ? await putxinxiapi({
          bizCode: this.form.bizCode,
          imageBase64: this.form.imageBase64,
          bizExplain: this.form.bizExplain,
          bizName: this.form.bizName,
          deviceModel: this.form.deviceModel,
          roleIds: this.form.roleIds.join(',')
        })
        : await postaddedapi({
          bizCode: this.form.bizCode,
          imageBase64: this.form.imageBase64,
          bizExplain: this.form.bizExplain,
          deviceModel: this.form.deviceModel,
          bizName: this.form.bizName,
          roleIds: this.form.roleIds.join(',')
        })
      this.isshow ? this.$message.success('编辑成功') : this.$message.success('新增成功')

      this.getdatalist()
      this.cancellation()
    },
    // 修改
    async modify (row) {
      this.dialogVisible = true
      this.isshow = true
      const { data: { entity } } = await getxinxiapi({ bizCode: row.code })
      this.$set(this.form, 'bizCode', entity.code)
      this.$set(this.form, 'bizExplain', entity.explain)
      this.$set(this.form, 'bizName', entity.name)
      this.$set(this.form, 'deviceModel', entity.deviceModel)
      // this.$set(this.form,'imageBase64','data:image/png;base64,' +entity.imageBase64)
      this.imageUrl = entity.imageBase64 ? 'data:image/png;base64,' + entity.imageBase64 : ''
      this.form.roleIds = entity.roleIds
      this.handleCheckedCitiesChange(entity.roleIds)
    },
    // 取消
    cancellation () {
      this.checkedCities = []
      this.imageUrl = ''
      this.isshow = false
      this.dialogVisible = false
      this.form.roleIds = []
      this.form.deviceModel = ''
      this.$refs.form.resetFields()
    },
    // 发布
    fabu (row) {
      this.dialogVisibles = true
      this.row = row
    },
    // 取消发布
    quxiaofabu () {
      this.dialogVisibles = false
      this.$refs.forms.resetFields()
    },
    // 确认发布
    async newfabu () {
      await this.$refs.forms.validate()
      await postfabuapi({ ...this.forms, bizCode: this.row.code })
      this.$message.success('发布成功')
      this.quxiaofabu()
      this.getdatalist()
    },
    // 删除类型
    delet (row) {
      this.$confirm('此操作将永久删除该配置, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await delleixinapi({ bizCode: row.code })
          this.$message.success('删除成功')
          this.getdatalist()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 查看版本信息
    async banben (row) {
      this.dialogVisibless = true
      const res = await getbanbenleixingapi({ bizCode: row.code })
      this.tableDatas = res.data.list
    },
    // 产看对应角色
    chankan (row) {
      this.dialogVisiblesss = true
      this.roleIds = row.roleIds
    },
    handleScroll () {
      console.log(5555)
      const scrollableContent = this.$refs.scrollableContent
      const fixedButtons = this.$refs.fixedButtons
      const scrollHeight = scrollableContent.scrollHeight
      const clientHeight = scrollableContent.clientHeight
      const scrollTop = scrollableContent.scrollTop

      if (scrollHeight - clientHeight - scrollTop < 100) {
        // 当滚动到距离底部100像素时，固定按钮位置
        fixedButtons.style.position = 'fixed'
        fixedButtons.style.bottom = '20px'
        fixedButtons.style.right = '20px'
      } else {
        // 按钮随着内容滚动
        fixedButtons.style.position = 'absolute'
        fixedButtons.style.bottom = '0'
        fixedButtons.style.right = '0'
      }
    }

  }
}
</script>

<style lang="scss" scoped>
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
::v-deep .el-dialog__body{
  height: 600px;
  overflow: hidden;
   overflow: auto;
}

.option{
  padding-left: 10px;
}
.bigbox{
  padding: 10px;
  height: 100%;
  .bodybox{
    background-color: #fff;
    height: 100%;
    padding: 20px;
    .topbox{
      display: flex;
      justify-content: space-between;
      margin-bottom: 15px;
      button{
        width: 60px;
        height: 30px;
        border-radius: 3px;
        color: #fff;
        background-color: #3b8eea;
      border: none;
      }
    }
    .dodybox{
      height: 90%;
      .table{
        height: 100%;

      }
    }
    .dialog{

      .button{
        width: 60px;
        height: 30px;
        border-radius: 3px;
        margin-left: 10px;
        background-color: #fff;
        border: 1px solid #ccc;
      }
      .sure{
        color: #fff;
        background-color: #3b8eea;
      }
      .quanxian{
        border-top: 1px solid #ccc;
        display: flex;
        .xitong{
          width: 20%;
          border-right: 1px solid #ccc;
          .juese{
            margin-top: 20px;
            font-size: 18px;
            color: black;
            margin-bottom: 15px;
          }
        }
        .gongnneg{
          padding-left: 20px;
          width: 80%;
          .taxt{
            font-weight: 600;
            // font-size: 18px;
            color: #000;
            margin-bottom: 15px;
          }
          ::v-deep .el-checkbox{
            width: 33%;
            margin-bottom: 15px;
          }
        }
      }

    }
    .fabuleix{
      .button{
        width: 60px;
        height: 30px;
        border-radius: 3px;
        margin-left: 10px;
        background-color: #fff;
        border: 1px solid #ccc;
      }
      .sure{
        color: #fff;
        background-color: #3b8eea;
      }
    }
    .banben{
      .button{
        width: 60px;
        height: 30px;
        border-radius: 3px;
        margin-left: 10px;
        background-color: #fff;
        border: 1px solid #ccc;
      }
    }
    .duiying{
      .button{
        width: 60px;
        height: 30px;
        border-radius: 3px;
        margin-left: 10px;
        background-color: #fff;
        border: 1px solid #ccc;
      }
    }
  }
}
::v-deep .el-checkbox-group{
  display: flex;
  flex-wrap: wrap;
}
::v-deep .el-checkbox{
  // width: 25%;
  margin-bottom: 15px;
}
::v-deep .avatar-uploader .el-upload {
  // margin-top: 10px;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  // ::v-deep .el-upload--text{
  //   width: 60px;
  //   height: 60px;
  // }
  ::v-deep .el-upload{
margin-top: 10px;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
  }
  .avatar {
    margin-top: 0 !important;
    width: 60px;
    height: 60px;
    display: block;
  }
</style>